<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <script src="../../content/web/globalization/cultures/kendo.culture.en-US.js"></script>
        <script src="../../content/web/globalization/cultures/kendo.culture.en-GB.js"></script>
        <script src="../../content/web/globalization/cultures/kendo.culture.de-DE.js"></script>
        <script src="../../content/web/globalization/cultures/kendo.culture.fr-FR.js"></script>
        <script src="../../content/web/globalization/cultures/kendo.culture.bg-BG.js"></script>

        <div id="example" class="k-content">
            <div id="product-view" class="k-header">
                <div class="right">
                    <label for="culture">Choose culture:</label>
                    <input id="culture" value="en-US" />
                </div>
                <h2>Product promotion</h2>
                <ul id="fieldlist">
                    <li>
                    <label for="startDate">Discount start date:</label>
                    <input id="startDate" />
                    <input id="startTime" value="12:00 AM" />
                    </li>
                    <li>
                    <label for="endDate">Discount end date:</label>
                    <input id="endDate" />
                    <input id="endTime" value="12:00 AM" />
                    </li>
                    <li>
                    <label for="initial">Initial price:</label>
                    <input id="initial" value="10" min="1"/>
                    </li>
                    <li>
                    <label for="discount">Discount:</label>
                    <input id="discount" value="0.05" min="0" max="0.5" step="0.01"/>
                    </li>
                </ul>
            </div>

            <style scoped>
                #example h2 {
					padding: 5px 0;
                    font-weight: normal;
					border-bottom: 1px solid #999;
                }
                #product-view {
                    border-radius: 10px 10px 10px 10px;
                    border-style: solid;
                    border-width: 1px;
                    overflow: hidden;
                    width: 500px;
                    padding: 20px 20px 0 20px;
					margin: 30px auto;
                    background-position: 0 -255px;
                }

                .right
                {
                    float:right;
                }

                #fieldlist
                {
                    width: 100%;
                    float:left;
                    margin:0;
                    padding: 10px 0 30px 0;
                }

                #fieldlist li
                {
                    list-style:none;
                    padding:5px 0;
                }
				#fieldlist label {
					display: inline-block;
					width: 120px;
					text-align: right;
				}

            </style>

            <script>
                $(document).ready(function() {
                    function startDateChange() {
                        var date = startDate.value();

                        if (date) {
                            date = new Date(date);
                            date.setDate(date.getDate() + 1);
                            endDate.min(date);
                        }
                    }

                    function endDateChange() {
                        var date = endDate.value();

                        if (date) {
                            date = new Date(date);
                            date.setDate(date.getDate() - 1);
                            startDate.max(date);
                        }
                    }

                    function cultureChange() {
                        kendo.culture(this.value());

                        var dateFormat = kendo.culture().calendar.patterns.d,
                            timeFormat = kendo.culture().calendar.patterns.t,
                            value;

                        //update format, re-render hours and set value again
                        startTime.options.format = startTime.timeView.options.format = timeFormat;
                        startTime.timeView.options.parseFormats = [timeFormat];
                        startTime.timeView.refresh();
                        startTime.value(startTime.value());

                        //update format, re-render hours and set value again
                        endTime.options.format = endTime.timeView.options.format = timeFormat;
                        endTime.timeView.options.parseFormats = [timeFormat];
                        endTime.timeView.refresh();
                        endTime.value(endTime.value());

                        //update format and set value again
                        startDate.options.format = startDate.dateView.options.format = dateFormat;
                        startDate.options.parseFormats = [dateFormat];
                        value = startDate.value();
                        startDate.value(null);
                        startDate.value(value);

                        //update format and set value again
                        endDate.options.format = endDate.dateView.options.format = dateFormat;
                        endDate.options.parseFormats = [dateFormat];
                        value = endDate.value();
                        endDate.value(null);
                        endDate.value(value);

                        // clear associated DateView in order to re-render calendar.
                        startDate.dateView.calendar.element.removeData("dateView");

                        //set values in order to apply new format
                        initial.value(initial.value());
                        discount.value(discount.value());
                    }

                    var startDate = $("#startDate").kendoDatePicker({ change: startDateChange }).data("kendoDatePicker"),
                    endDate = $("#endDate").kendoDatePicker({ change: endDateChange }).data("kendoDatePicker"),
                    startTime = $("#startTime").kendoTimePicker().data("kendoTimePicker"),
                    endTime = $("#endTime").kendoTimePicker().data("kendoTimePicker"),
                    initial = $("#initial").kendoNumericTextBox({ format: "c" }).data("kendoNumericTextBox"),
                    discount = $("#discount").kendoNumericTextBox({ format: "p" }).data("kendoNumericTextBox"),

                    today = new Date();
                    startDate.value(today);
                    endDate.min(today);

                    today = new Date(today);
                    today.setDate(today.getDate() + 1);

                    endDate.value(today);
                    startDate.max(today);

                    $("#culture").kendoDropDownList({
                        change: cultureChange,
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: [{text: "bg-BG"},
                        {text: "de-DE"},
                        {text: "en-US"},
                        {text: "en-GB"}]
                    });
                });
            </script>
        </div>

</body>
</html>
